<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>async/await异步代码执行顺序</title>
</head>
<body>
    <!-- 
        好文!!!
        async/await执行顺序详解：https://www.cnblogs.com/fundebug/p/10095355.html


        js 异步执行顺序：https://www.cnblogs.com/xiaozhumaopao/p/11066005.html
     -->
</body>
<script>
    // 测试题1
    // console.log('a')
    // setTimeout(()=>{
    //     console.log('b')
    // }, 0)
    // new Promise((resolve)=>{
    //     console.log('c')
    //     resolve()
    // }).then(()=>{
    //     console.log('d')
    // })

    // // 测试题2
    // console.log('script start')  //1
    // async function async1() {
    //     await async2()
    //     console.log('async1 end') //5
    // }
    // async function async2() {
    //     console.log('async2 end')//4
    // }
    // async1()

    // setTimeout(function() {
    //     console.log('setTimeout') //8
    // }, 0)

    // new Promise(resolve => {
    //     console.log('Promise') //2
    //     resolve()
    // })
    // .then(function() {
    //     console.log('promise1') //6
    // })
    // .then(function() {
    //     console.log('promise2') //7
    // })

    // console.log('script end') //3

    console.log('----------------------------------') 

    // 测试题3
    // async function fn1(){
    //     console.log('fn1 start') 
    //     await fn2()
    //     console.log('fn1 end') 
    // }
    // console.log('script start') 
    // fn1()
    // async function fn2(){
    //     console.log('fn2 start') 
    //     setTimeout(()=>{
    //         console.log('setTimeout') 
    //     }, 0)
    //     console.log('fn2 end') 
    // }
    // new Promise((resolve)=>{
    //     console.log('promise') 
    //     resolve()
    // }).then(()=>{
    //     console.log('resolve1') 
    //     // return Promise.reject()
    // }).then(()=>{
    //     console.log('resolve2')
    // }).catch(()=>{
    //     console.log('reject') 
    // })
    // console.log('script end') 


    /*
        很多人以为await会一直等待之后的表达式执行完之后才会继续执行后面的代码，实际上await是一个让出线程的标志。
        await后面的函数会先执行一遍，然后就会跳出整个async函数来执行后面js栈（后面会详述）的代码。
        等本轮事件循环执行完了之后又会跳回到async函数中等待await后面表达式的返回值，
        如果返回值为非promise则继续执行async函数后面的代码，否则将返回的promise放入promise队列（Promise的Job Queue）
    */

    // 测试题4
    // function testSometing() {
    //     console.log("执行testSometing");
    //     return "testSometing";
    // }

    // async function testAsync() {
    //     console.log("执行testAsync");
    //     return Promise.resolve("hello async");
    // }

    // async function test() {
    //     console.log("test start...");
    //     const v1 = await testSometing();
    //     console.log(v1);
    //     const v2 = await testAsync();
    //     console.log(v2);
    //     console.log(v1, v2);
    // }

    // test();

    // var promise = new Promise((resolve)=> { console.log("promise start.."); resolve("promise");});//3
    // promise.then((val)=> console.log(val));s

    // console.log("test end...")

    

</script>
</html>